<template>

  <div style="height:auto; overflow-y: scroll;">
    <van-button   round color="#11a3ef" plain   block icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%95%86%E5%93%81%E5%8F%91%E5%B8%83.png" @click="update2musicall()">修改音乐</van-button>

    <!-- 居中布局 -->
    <van-row>
      <van-col span="2"></van-col>
      <van-col span="20">
        <div>
          <!-- <h3>上传音乐</h3> -->
          <!-- <UploadMusic></UploadMusic> -->
          <!-- <van-field name="upMusic" label="上传音乐文件">
            <template #input>
           
              <van-uploader :before-read="beforeMusicRead" :after-read="afterMusicRead" accept=".mp3, .ogg, .wav, .acc">
                <van-button  icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E4%B8%8A%E4%BC%A0.png" round>上传音乐</van-button>
            
              </van-uploader>
            </template>
          </van-field> -->
          <!-- <van-field  v-if="playupload" label="试听音乐"> -->
            <van-field   label="试听音乐">
            <template #input>
              <van-button @click="playUploadMusic" round icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E6%92%AD%E6%94%BE.png" >点击试听</van-button>
            </template>
           
          </van-field>
    
          <!-- 输入音乐信息 -->
          <!-- 歌名 -->
          <!-- 作者 -->
          <!-- 选择标签 -->
          <br />
          <van-field name="uploader" label="上传cd图片">
            <template #input>
              <!-- 上传图片 可以预览图片 -->
              <van-icon :name="musicUploadDTO.musicIcon" size="5rem"></van-icon>
                <!-- 检查格式 -->
              <van-uploader v-model="fileList" multiple :max-count="1" :before-read="beforeRead" :after-read="afterRead" />
            </template>

              </van-field>
          <div>
          <van-form @submit="onSubmit">
            
            <van-field
              v-model="musicUploadDTO.musicName"
              name="歌名"
              label="歌名"
              placeholder="歌名"
              :rules="[{ required: true, message: '请填写歌名' }]"
            />
            <van-field
              v-model="musicUploadDTO.musicAuthor"
              name="作者"
              label="作者"
              placeholder="作者"
              :rules="[{ required: true, message: '请填写作者' }]"
            />


<van-field
              readonly
              clickable
              name="picker"
              :value="value"
              label="类型"
              placeholder="点击选择音乐类型"
              @click="showPicker = true"
            />
<van-popup v-model="showPicker" position="bottom" round>
          <div style="overflow:scroll; height: auto;" >
            <van-row>
              <van-col span="10">
                <van-button  icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%85%A8%E9%80%89.png" @click="checkAll" round>全选</van-button>
              </van-col>
              <van-col span="9">
                <van-button icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%8F%96%E6%B6%88.png" @click="toggleAll" round>取消</van-button>
              </van-col>
              <van-col span="5">
                <van-button icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E7%A1%AE%E8%AE%A4.png" @click="showlabel()" round>提示</van-button>
              </van-col>
            </van-row>
       
    
       

          <van-checkbox-group v-model="checkboxResult" ref="checkboxGroup" >
            
            <van-cell-group >
              <van-cell
                v-for="(item, index) in columns"
                clickable
                :key="item"
                :title="`${item}`"
                @click="toggle(index)"
              >
                <template #right-icon>
                  <van-checkbox :name="item" ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>

     
          </van-checkbox-group>
        </div>
            </van-popup>

<!-- aaaaaaaaaaaaaaaaaaaa -->


            <van-field
              v-model="musicUploadDTO.musicDescription"
              type="textarea"
              autosize
              name="描述"
              label="描述"
              placeholder="描述"
              :rules="[{ required: true, message: '请填写描述' }]"
            />
            <van-field
              v-model="musicUploadDTO.songWord"
              type="textarea"
              autosize
              name="歌词"
              label="歌词"
              placeholder="歌词"
              :rules="[{ required: true, message: '请填写歌词' }]"
            />
    
            <!-- <van-button   round color="#11a3ef" plain   block icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%95%86%E5%93%81%E5%8F%91%E5%B8%83.png" @click="upload2musicall()">发布音乐</van-button> -->


          </van-form>
        </div>

          
        </div>

      </van-col>
      <van-col span="2"></van-col>
    </van-row>


  </div>
</template>

<script>
import MusicAPI from '@/api/MusicAPI'
import UploadAPI from '@/api/UploadAPI'
// import UploadMusic from '@/components/UploadMusic.vue'
// import bus from '@/components/eventBus'

export default {
  name: 'UserUpdateMusic',

  components:{
   
  },

  data() {
    return {
      // 预览文件列表
      fileList: [],

      activeId: 1,
      activeIndex: 0,

      la: false,
      value: '',
      showPicker: false,
      columns: [],
      checkboxResult:[],//一定必须是数组不能是字符串
      labelResult:[], 

      ItMusicId:0,

      // 试听
      playupload: false,

      // 音乐信息上传格式对象
      musicUploadDTO: {
        musicId: '',
        musicName: '',
        musicAuthor: '',
        musicUrl: '',
        musicDescription: '',
        musicIcon: '',
        songWord: '',
        musicLike: 0,
        countCommont: 0,
        countCollect: 0,
        labelList: [
          
        ]
      },
      allLabelList: [],
      label2: {
        labelId: '',
        labelName: '',
      }
    }
  },
  created() {
    var Id1 = localStorage.getItem("musicId",this.ItMusicId)
     if(this.$route.params.id == null){
      this.ItMusicId=Id1
     }else{
      this.ItMusicId=this.$route.params.id
      localStorage.setItem("musicId",this.ItMusicId)
     }

     this.$toast(this.ItMusicId)
     this.getMusicInfo(this.ItMusicId)

    this.AllLabel()
  },

  // watch:{
  //   result:function(new_v,old_v) {
  //     this.labelList=this.result
  //   }
  // },
  methods: {


    getMusicInfo(musicId){
      var result = MusicAPI.GetMyUpdateMusic(musicId)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.musicUploadDTO = val.data
          this.checkboxResult =   this.musicUploadDTO.labelList
          // this.$router.go(0)
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    showlabel(){
      // for(let i in this.result){
      //   labelList.push(this.columns[i])
      // }
      this.value=''
      for (let index = 0; index < this.checkboxResult.length; index++) {
        this.value += this.checkboxResult[index]+' , ';
        
      }
      
      console.log(this.checkboxResult)
      this.$toast(this.value)
    },
     toggle(index) {
      this.$refs.checkboxes[index].toggle();
      
      console.log(this.checkboxResult)
    },

    // 全选 反选（取消）
    checkAll() {
      // checkboxGroup.toggleAll(true);
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(false);
    },

    // 修改音乐到后端
    update2musicall(){
      this.musicUploadDTO.labelList=this.checkboxResult
      var result = MusicAPI.UpdateMusic(this.musicUploadDTO)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.$toast('修改音乐成功！')
          // 返回个人中心
          this.$router.push({path: '/userInfo'})
          // this.$router.go(0)
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    // 播放上传的音乐
    // 全局事件总线传输url给音乐播放器
    playUploadMusic(){
      // bus.$emit("playUrl",this.musicUploadDTO.musicUrl)
      this.$bus.$emit("playUrl",this.musicUploadDTO.musicUrl)
    },

    beforeRead(file) {
      if (file.type == 'image/jpeg' || file.type == 'image/png') {
        console.log('格式正确');
        return true;
      }else{
        this.$toast('请上传 jpg 格式图片')
        console.log('请上传 jpg 格式图片');
        return false;
      }
    
    },
    // 读取图片文件后
    afterRead(file){
      // console.log(file);
      // consle.log(file.name)
      this.uploadIcon(file)
    },
    // 上传音乐之前
    beforeMusicRead(file){
      if (file.type == 'audio/mpeg' || file.type == 'application/ogg' || file.type === 'audio/ogg') {
        console.log('格式正确');
      return true;
      }else{
        this.$toast('请上传mp3或ogg格式文件')
        // Toast();
        console.log('请上传mp3或ogg格式文件');
        return false;
      }
   
    },
       // 读取音乐文件后
       afterMusicRead(file){
        // consle.log(file)
      this.uploadMusicUrl(file)
    },

    // 发送上传图片请求
    uploadIcon(file){
    var result = UploadAPI.Upload2Qiniu(file)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.musicUploadDTO.musicIcon=val.data
          console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
      
        }
            })
      },

      // 上传音乐文件
    //   uploadMusicUrl(file){
    // var result = UploadAPI.Upload2Qiniu(file)
    //   // 获取响应结果 
    //   result.then((val)=>{
    //     if(val.success){
    //       this.musicUploadDTO.musicUrl=val.data
    //       console.log(this.musicUploadDTO.musicUrl);
    //       this.$toast('上传音乐文件成功！')
    //       this.playupload=true
    //     }else{
    //       console.log(val.errorMsg)
    //       this.$toast(val.errorMsg)
      
    //     }
    //         })
    //   },

    // 选择器...
    // onConfirm(value) {
    //   this.value = value;
    //   this.labelList.push()
    //   this.showPicker = false;
    // },
    // 提交表单
    onSubmit(values){
      console.log('submit', values);
    },

    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },

    // uploadMusic2qiniu(file) {

    // },
    AllLabel() {
      var that = this
      var result = MusicAPI.GetAllLabel()
      // 获取响应结果 
      result.then((val) => {
        console.log(val)
        if (val.success) {
          var length = val.data.length
          // this.allLabelList=val.data
          for (var i = 0; i < length; i++) {
            that.allLabelList.push(val.data[i]);
            that.columns.push(val.data[i].labelName)
          }
        } else {
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)

        }
        console.log(that.allLabelList);
      })
    },

   

    // 返回布尔值
    // beforeRead(file) {
    //   if (file.type !== 'mp3/ogg/wav') {
    //     // Toast('请上传 jpg 格式图片');
    //     return false;
    //   }
    //   return true;
    // },
    // 返回 Promise
    // asyncBeforeRead(file) {
    //   return new Promise((resolve, reject) => {
    //     if (file.type !== 'mp3/ogg/wav') {
    //       Toast('请上传 jpg 格式图片');
    //       reject();
    //     } else {
    //       let img = new File(['foo'], 'bar.jpg', {
    //         type: 'mp3/ogg/wav',
    //       });
    //       resolve(img);
    //     }
    //   });
    // },
  }

}
</script>

<style>

</style>